GT-ONE 楽天タグ講座 パイプ奮闘記

  

おもしろタグ教室【色々なスクロール】




【色々なスクロール VOL.4】



    【はじめに】

    【初心者のためのHP の飾りつけ教室】とは別に、余談のページを作ってみました。
    ここではちょ っと変わったタグや、趣向を紹介していきましょう。



    今回もスクロールのタグ「MARQUEE」を、もう少 しやって行きましょう。

    前回同様、「テーブル」の中で、「MARQUEE」を 動かして見ますが、基本的な属性に付いても、
    述べて行きたいと思います。

    【色々なスクロールVOL.3】では、左右に文字や画像を行ったり来たりさせて見ました。
    今度は、上下に行ったり来たりする「MARQUEE」 をやって見ましょう。

    まずは、文字を上下に行ったり来たりさせて見ます。


    上下に文字を行ったり来た りさせます。

    ↑これが、基本の「MARQUEE」です。これのタグを書いて 見ましょう。


    <MARQUEE direction=up behavior=alternate>上下に文字を行ったり来たり させます。</MARQUEE>


    これが基本のタグです。
    行ったり来たりさせるための、 属性を指定するタグが「behavior=alternate」です。
    上下させるための、属性を指定 するタグが「direction=up」です。
    「MARQUEE」 「幅」「高さ」「速度」の属性は、指定してお りません。「MARQUEE]の「幅」は、
    指定しなければ、端から端まで表示され ます。
    「速度」も指定しなければ、前にも述べましたとおり、1~20段階の6のス ピードになります。

    基本のタグの他に「MARQUEE」の範囲が判りやすいように 、「MARQUEE」の背景を指定するタグ、「bgcolor=red」を入れてあります。
    背景を指定しませんと、↓下のように、背景が透過して出ます。



    あとはお好きに、動かす文字の「FONT」を変えますと、このようになります。

    上下に文字を行ったり来たりさせます。

    「FONT」の属性の指定はちなみにこのように、しました。
    <FONT SIZE="5" COLOR="yellow" FACE="HG創英角ポップ体">上下に文字を行っ たり来たりさせます。</FONT>

    では、この「M ARQUEE」を「テーブル」の中に入れて、属性を持たして見ましょう。


    上下に文字を行ったり来たりさせま す。

    みなさん今年もよろしく!



    どうでしょうか!「テーブル」の中で「MARQUEE」 「幅」「高さ」「速度」を指定して見ました。
    では、このサンプルのタグを書いて見ましょう。



    <table border=4 cellSpacing=5 bgcolor=pink width=65%><td> <MARQUEE direction=up behavior=alternate scrollAmount=6 bgcolor=blue><FONT SIZE="5" COLOR="yellow" FACE="HG創英角ポップ体">上下 に文字を行ったり来たりさせます。<P>みなさん今年もよろしく! </FONT></MARQUEE></td></table>



    「TABLE」「MARQUEE」の「属性」のタグの 説明をしておきます。


    <table border="~テーブルの枠の幅~" cellSpacing="~テーブルの縁の幅~" bgcolor="~テーブルの縁の色~"width="~テー ブルの幅~"><td><MARQUEE direction=up behavior=alternate scrollAmount="~スクロールの速度~(1~20)" bgcolor="~背景の色~">~スクロールさせた い"文字"と"属性"のタグ~(画像)</MARQUEE></td></table>



    判りましたでしょうか。「属性」の数値を色々変えて、自分独自の「MARQUEE]を造って見てください。
    私は、テーブ ルの中で色々やったほうが見栄えがいいと思います。

    では、画像を上下に「スクロー ル」させてみましょう。

    これの、雛形のタグを下に乗っけて置きますので、参考にしてください。


    <table border=4 cellSpacing=5 bgcolor=pink><td bgcolor=black> <MARQUEE behavior=alternate bgcolor=black direction=up height=400 width=200><center><IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/19.jpg" width="135" height="92"><P> <IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/19.jpg" width="135" height="92"></center></MARQUEE></td></table>

    ここでの注意点は「MAR QUEE]の「高さ」「幅」は、自由に変えられますが、動かす画像が、左に寄 ってしまいます。そういう時は、センターリングのタグ【<CENTER>~画像~ </CENTER>】で、画像をはさんで上げますと、真ん中に来ますよ。
    この、雛形 のタグには、すでにセンターリングのタグが入れてあります。






    では今回は、もう少しやって見ましょう。

    【色々なスクロールVOL.3】 でやった、「MARQUEE」と今回の「MARQUEE」を結合しますと、
    ↓下のようになりま す。(*^_^*)


    文字をランダムに動かして見ます
    同じように画像も出来ますよ


    ここでも、「MARQUEE」が判りやすいように、背 景を表示していますが、何も指定しなければ、背景が透過します。

    では、基本のタグ を書いて見ます。


    <MARQUEE behavior=alternate direction=up bgcolor=red><MARQUEE behavior=alternate>文字をランダムに動かして見ます <BR>同じように画像も出来ますよ</MARQUEE></MARQUEE>



    では、「テーブル」の中に、この「MARQUEE」を 入れて見ましょう。

    まずは、文字をテーブルの中で動かして見ます。

    上下に文 字を行ったり来たりさせます。

    みなさん今年もよろしく!



    この雛形のタグは、↓こうなります。


    <table border=4 cellSpacing=5 bgcolor=pink width=90%><td> <MARQUEE direction=up behavior=alternate scrollAmount=6 bgcolor=blue><MARQUEE behavior=alternate><FONT SIZE="5" COLOR="yellow" FACE="HG創英角ポップ体">上下に文字を行ったり来たりさせ ます。<P>みなさん今年もよろしく! </FONT></MARQUEE></MARQUEE></td></table>



    次に、画像をテーブルの中で動かして見ます。



    この雛形のタグは、↓こうなります。


    <table border=4 cellSpacing=5 bgcolor=pink width=60%><td> <MARQUEE direction=up behavior=alternate scrollAmount=6 bgcolor=blue><MARQUEE behavior=alternate><IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/19.jpg" width="135" height="92"></MARQUEE></MARQUEE></td></table>





★ではみなさんがんばってください。★
ご 質問、ご感想は掲示板か私書箱にどうぞ!
よく御存じの方は読まないで下さいね。( *^_^*)




おもしろタグ教 室【MENU】 にもどる。






ジャンル別一覧
人気のクチコミテーマ

© Rakuten Group, Inc.